import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import header from './index.module.css'
import { PropTypes } from 'prop-types'


export default class List extends Component {
  // 对props接收传值的类型、必要性的限制
  static propTypes = {
    addTodos:PropTypes.func.isRequired,
  }
  // 函数在生命周期外写
  keyUp = (event) =>{
    const {keyCode, target} = event
    if(keyCode === 13){
      // 这边id生成用的是nanoid  也可以用uuid   但是uuid包比较大
      this.props.addTodos({id:nanoid(),done:target.value,isTrue:false})
      if(target.value.trim()===''){
        alert('输入不能为空')
        return
      }
    // 清空输入框
     target.value = ''
    }
  }
  render() {
    return (
      <div className={header.index}>
        <input placeholder='在此输入新的状态，按下回车即可添加' onKeyUp={this.keyUp}/>
      </div>
    )
  }
}
